﻿<link href="/UI/css/components/leftnavi.min.css" rel="stylesheet" />
<template>
    <div id="left-navi-container">
        <ul id="left-navi-items">
            <template>
                <li v-for="i in menu.items" class="nv-item" :class="{slcted:slctedUrl&&slctedUrl==i.url}">
                    <a class="LinkBlock" v-bind:href="i.url" @click="NaviTo(i.url)">
                        <i class="pre" :class="i.icon||'soicon icon-widgets'">
                        </i>
                        {{i.title}}
                        <i class="soicon icon-arrow-right afx"></i>
                    </a>
                </li>
            </template>
        </ul>
        <ul id="left-navi-group">
            <template>
                <li v-for="g in menu.groups">
                    <h4 class="nv-group-title">{{g.title}}</h4>
                    <ul class="nv-group-items">
                        <li v-for="i in g.items" class="nv-item" :class="{slcted:slctedUrl&&slctedUrl==i.url}">
                            <a class="LinkBlock" v-bind:href="i.url" @click="NaviTo(i.url)">
                                <i class="pre" :class="i.icon||'soicon icon-widgets'">
                                </i>
                                {{i.title}}
                                <i class="soicon icon-arrow-right afx"></i>
                            </a>
                        </li>
                    </ul>
                </li>
            </template>
        </ul>
    </div>
</template>
<script>
    opt={
        mounted: function () {
            let v_navi = this;
            v_navi.onNavied();
            window.addEventListener("message", function (m) {
                if (m.data == "locationChanged" && m.origin == window.location.origin) {
                    v_navi.onNavied();
                }
            });
        },
        props: {
            menu: {
                title: '标题',
                groups: [],
                items: [
                    {
                        title: '菜单项名称',
                        url: "地址",
                        icon:""
                    }
                ]
            },
            defaultIcon:'icon-add'
        },
        data: function () {
            return {
                slctedUrl: null
            }
        },
        methods: {
            NaviTo: function (url) {
                this.slctedUrl = url;
            },
            onNavied: function (ev) {
                let v_navi = this;
                if (v_navi.menu.items) {
                    v_navi.menu.items.forEach(function (i) {
                        if (window.location.href.indexOf(i.url) > 0) {
                            v_navi.slctedUrl = i.url;
                            return;
                        }
                    });
                };

                if (v_navi.menu.groups) {
                    v_navi.menu.groups.forEach(function (g) {
                        g.items.forEach(function (i) {
                            if (window.location.href.indexOf(i.url) > 0) {
                                v_navi.slctedUrl = i.url;
                                return;
                            }
                        });
                    });
                };
            }
        }
    };
</script>
